<template>
	<view class="pageClass">
		<view class="typeSearch">
			<view class="search">
			  <view class="iconBg"></view>
			  <input class="searchInput" placeholder="请输入分类名称查询" v-model="searchValue" />
			  <view class="iconXX" v-if="searchValue" @click.stop="handelClear"></view>
			</view>
			<button class="btnSelect" @click.stop="handelSearch('click')">查询</button>
		</view>
		
		<view class="videoType hotType" v-if="!isSearch">
			<view class="title">热门分类</view>
			<view class="hotContent">
				<view class="hotList"  v-for="item in hotClassList" :key="item.id" @click="toSerachInfo(item)">
					{{'#' + item.name}}
				</view>
			</view>
		</view>
		
		
		<view class="videoType allType" v-if="!isSearch">
			<view class="title">所有分类</view>
			<scroll-view class="scrollView" :scroll-y="true" @scrolltolower="flash">
				<view class="allContent">
					<view class="allList"  v-for="item in allClassList" :key="item.id" @click="toSerachInfo(item)">
						{{'#' + item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="videoType allType" v-if="isSearch">
			<view class="title">搜索结果</view>
			<scroll-view class="scrollView1" :scroll-y="true" @scrolltolower="flashSearch">
				<view class="allContent">
					<view class="allList" v-for="item in resultClassList" :key="item.id" @click="toSerachInfo(item)">
						{{ '#' + item.name}}
					</view>
					<view class="noClass" v-if="resultTempClassList.length == 0 && resultClassList.length == 0">
						{{(resultTempClassList.length == 0 && resultClassList.length == 0) ? '暂无分类' : '没有更多了'}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {apiGetClass, apiGetClassAll, apiGetClassSearch} from '../../api/class.js'
	export default {
		data() {
			return {
				isSearch: false,
				searchValue: '',
				pageIndex: 1,
				pageSize: 15,
				resultPageIndex: 1,
				resultPageSize: 15,
				hotClassList: [],
				allClassList: [],
				tempAllClassList: [],
				resultTempClassList: [],
				resultClassList: []
				
			}
		},
		onLoad() {
		},
		beforeMount() {
			var self = this
			self.getHotClass()
			self.getAllClassList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			var self = this
			this.pageIndex = 1
			this.pageSize = 15
			setTimeout(function () {
				self.getHotClass()
				self.getAllClassList(true)
				uni.stopPullDownRefresh();
			}, 2000);
		},
		methods: {
			flash(){
				var self = this
				if (self.tempAllClassList.length < self.pageSize) {
					return
				}
				self.pageIndex++
				self.getAllClassList()
			},
			
			flashSearch() {
				var self = this
				if (self.resultTempClassList.length < self.resultPageSize) {
					return
				}
				self.resultPageIndex++
				self.handelSearch()
			},
			
			handelSearch(isClick){
				var self = this
				if(isClick) {
					self.resultPageIndex = 1
					self.resultClassList = []
				}
				if (!self.searchValue) {
					self.isSearch = false
					uni.showToast({
						title: '请输入要查询的分类',
						icon: 'none'
					})
					return
				}else {
					self.isSearch = true
					apiGetClassSearch({
						name: self.searchValue,
						page: self.resultPageIndex,
						page_size: 25
					}).then((r) => {
						self.resultTempClassList = r.data.data
						self.resultClassList = self.resultClassList.concat(r.data.data)
					})
				}
			},
					
			handelClear() {
				var self = this
				self.searchValue = ''
				self.isSearch = false
			},
			
			// 获取热门分类
			getHotClass () {
				var self = this
				apiGetClass().then((r)=>{
					self.hotClassList = r.data
				})
			},
			
			// 获取所有分类
			getAllClassList (reset) {
				var self = this
				apiGetClassAll({
					page: self.pageIndex,
					page_size: 15
				}).then((r)=>{
					if(reset) self.allClassList = []
					self.tempAllClassList = r.data.data
					self.allClassList = self.allClassList.concat(self.tempAllClassList)
				})
			},
			
			// 跳转去分类详情
			toSerachInfo(item) {
				var id = item.id || 1
				var name = item.name || '电影'
				this.$navTo.togo('./classInfo?id=' + id + '&name=' + name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.typeSearch {
		width: 93.6%;
		margin-left: 3.2%;
		height: 74rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		.search {
			height: 100%;
			width: 75%;
			display: flex;
			justify-content: flex-start;
			background-color: #1C1B2B;
		}
		.iconBg {
			width: 15%;
			height: 100%;
			border-radius: 9.41rpx;
			background-image: url(./icon/search.png);
			background-repeat: no-repeat;
			background-position: 28.23rpx center;
			background-size: 32.94rpx;
			
		}
		.iconXX {
			width: 15%;
			background-image: url(./icon/clear.png);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 32.94rpx;
		}
		.searchInput {
			margin-top: 5.88rpx;
			height: 90%;
			width: 70%;
		}
		.btnSelect{
			width: 141.17rpx;
			height: 100%;
			line-height: 74rpx;
			text-align: center;
			color: #FC315A;
			font-size: 32rpx;
			background-color: black;
		}
		
	}
	.videoType {
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 60rpx;
		.title {
			font-size: 32rpx;
			color: #DDDBFB;
			margin-bottom: 40rpx;
		}
		.hotContent {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.scrollView {
			height: 50vh;
		}
		
		.scrollView1 {
			height: 80vh;
		}
		.allContent {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}
		.hotList {
			width: 220rpx;
			height: 220rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 220rpx;
			margin-right: 20rpx;
			padding-left: 22rpx;
			padding-right: 22rpx;
			box-sizing: border-box;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			// background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584682830898&di=e47f0a4427995ca20953aa415989e05e&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F170615%2F143633G57-0.jpg);
			background-color: #1C1B2B;
			&:nth-child(3n) {
			  margin-right: 0;
			}
		}
		.allList {
			width: 220rpx;
			height: 160rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 160rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			background-color: #1C1B2B;
			border-radius: 4.7rpx;
			padding-left: 22rpx;
			padding-right: 22rpx;
			box-sizing: border-box;
			&:nth-child(3n) {
			  margin-right: 0;
			}
		}
		
		.allList:nth-child(3n){
			margin-right: 0% !important;
		}
		
		
		.noClass {
			margin-top: 150rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>
